<template>
    <div>
        <van-field readonly clickable required rows="1" type="textarea" autosize :label="labelText" :value="nameVal"
                   placeholder="--请选择--"
                   @click="pickerShow = true"/>
        <van-popup v-model="pickerShow" position="bottom">
            <!-- @click-left="onClickLeft" @click-right="onClickRight"  -->
            <van-nav-bar left-text="取消" right-text="确认" @click-left="pickerShow = false"
                         @click-right="onPopupClickRight()"/>
            <van-checkbox-group v-model="dataValArr">
                <van-cell-group style="max-height: 200px;overflow-y: scroll;">
                    <van-cell v-for="(item, index) in dataSource" :key="index" :title="item.name">
                        <van-checkbox :name="item.value" ref="checkboxes" slot="right-icon"/>
                    </van-cell>
                </van-cell-group>
            </van-checkbox-group>
        </van-popup>

    </div>
</template>

<script>
    export default {
        name: 'checkboxGroup',
        props: {
            selectType: {
                type: Number,
                default: 0
            },
            labelText: {
                type: String,
                default: '标签名称'
            },
            nameVal: {
                type: String,
                default: '标签名称'
            },
            dataSource: {
                type: Array,
                default: () => []
            },
            dataVal: Array,
        },
        data() {
            return {
                type: this.selectType,
                title: this.labelText,
                // name: this.nameVal,
                // dataArrSource: this.dataSource,
                // dataValArr: [1,2,3],
                dataValArr: this.dataVal,
                pickerShow: false
            }
        },
        methods: {
            onPopupClickRight() {
                this.pickerShow = false
                let nameArr = []
                this.dataSource.map((item, index) => {
                    if (this.dataValArr.includes(item.value)) {
                        nameArr.push(item.name);
                    }
                })
                this.name = nameArr.toString(',');
                this.$emit('selectResult', this.type, nameArr.toString(','), this.dataValArr);
                this.pickerShow = false
            }
        }
    }
</script>

<style scoped lang="less">
    .footer-box {
        height: 6.5vh;
        border-top: 1px solid #dbdbdb;
        background: #fff;
        display: flex;
        padding: 5px 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;

        div {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #999;
        }

        div:first-child {
            position: relative;
        }

        div:first-child:after {
            content: "";
            height: 15px;
            width: 1px;
            border-left: 1px dashed #dcdcdc;
            position: absolute;
            right: 0;
        }

        img {
            width: 18px;
            height: 21px;
        }

        .isActive {
            color: #366cb3;
        }
    }

    .van-cell--required::before {
        color: #fff;
    }
</style>
